<template>
  <div class="ju-metro-box"
       :class="{'is-round':isRound,'is-debug':isDebug}"
       :style="{'--box-col':col,'--box-row':row}">
    <slot></slot>
    <div v-if="isDebug"
         class="debug-index">{{ indexOfOwner }}</div>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from "@some21/vue-class-decorator";

  @Component({
    name: "JuMetroBox",
    // inheritAttrs:
  })
  export default class extends Vue {
    @Prop({ type: Number, default: 1 })
    col: number;
    @Prop({ type: Number, default: 1 })
    row: number;
    @Prop({ type: Boolean, default: void 0 })
    round?: number;
    @Prop({ type: Boolean, default: void 0 })
    debug: boolean;

    get owner() {
      let parent = this.$parent as any;
      while (parent && !parent.metroId) {
        parent = parent.$parent;
      }
      return parent;
    }
    get indexOfOwner() {
      return this.owner?.boxs.findIndex(box => box === this) ?? -1;
    }

    get isRound() {
      if (typeof this.round === "undefined") {
        return this.owner?.round || this.round;
      } else {
        return this.round;
      }
    }
    get isDebug() {
      if (typeof this.debug === "undefined") {
        return this.owner?.debug || this.debug;
      } else {
        return this.debug;
      }
    }

    mounted() {
      this.owner?.boxs.push(this);
    }

    beforeDestroy() {
      this.owner?.boxs.splice(this.indexOfOwner, 1);
    }
  }
</script>

<style lang="scss" scoped>
  .ju-metro-box {
    box-sizing: border-box;
    width: calc(var(--box-width, 200px) * var(--box-col, 1) + var(--box-gutter, 0) * (var(--box-col, 1) - 1));
    height: calc(var(--box-height, 200px) * var(--box-row, 1) + var(--box-gutter, 0) * (var(--box-row, 1) - 1));
    display: inline-block;
    background: #fff;
    overflow: hidden;
    transition: all 500ms ease 0s;

    &.is-round {
      border-radius: var(--box-rounded, 4px);
    }
    &.is-debug {
      .debug-index {
        font-size: calc(min(var(--box-width, 200px) * var(--box-col, 1), var(--box-height, 200px) * var(--box-row, 1)) / 2.5);
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000; // 参考 element-ui 的z-index 初始值
        color: rgba(0, 0, 0, 0.85);
        text-shadow: 0 0 7px #fff;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
      }
    }
  }
</style>
